<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础管理</el-breadcrumb-item>
        <el-breadcrumb-item>新闻动态</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-row>
        <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="6" v-for="(info, index) in childrenInfo" :key="index">
             <div style="display: flex; justify-content: center;min-width: 300px">
               <el-card class="my-card" shadow="hover">
                 <div class="card-img">
                   <img :src="'http://192.168.1.19:8077/share/hope/common/view-avatar?path='+info.imgPath" alt="image">
                 </div>
                 <div class="card-content">
                   <span class="card-title">{{ info.name }}</span>
                   <p class="card-description" v-if="info.gender==1"><b>性别：</b>男</p>
                   <p class="card-description" v-if="info.gender==0"><b>性别：</b>女</p>
                   <p class="card-description" ><b>年龄：</b>{{info.age}}</p>
                 </div>
                 <div class="bottom clearfix">

                   <el-button type="primary" @click="showDetail(info)" size="mini">查看详情</el-button>

                   <el-button type="success" icon="el-icon-star-off" @click="stars(info.id)" size="mini"></el-button>
                 </div>
               </el-card>

             </div>
            </el-col>
            <div style="width: 10px">
            <el-col :xs="24" :sm="12" :md="6">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[8, 16, 32, 64]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
            </el-col>
            </div>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog
        title=""
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <div class="user-information">
          <h2>基本信息</h2>
          <div class="user-info-row">
            <label>姓名:</label>
            <span>{{ child.name }}</span>
          </div>
          <div class="user-info-row">
            <label>年龄:</label>
            <span>{{ child.age }}</span>
          </div>
          <div class="user-info-row">
            <label>收入:</label>
            <span>{{ child.familyIncome }}</span>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      currentPage:1,
      pageSize:8,
      centerDialogVisible: false,
      childrenInfo: [],
      total:0,
      child:{},
      user: {},
    }
  },
  created() {
    this.getChildrenInfo()
    this.user = JSON.parse(localStorage.getItem('userInfo'))
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageSize=val
      this.getChildrenInfo()
    },
    handleCurrentChange(val) {
      this.currentPage=val
      this.getChildrenInfo()
    },
    getChildrenInfo() {
      const request = {
        page: {
          desc: "",
          size: this.pageSize,
          asc: "",
          current: this.currentPage
        },
        query: {}
      }
      this.$axios.post('pool_child/page', request).then(res => {
        // console.log(res.data)
        if (res.data.code === 20000) { //成功
          // this.$message.success(res.data.msg)
          // console.log(res)
          this.total=res.data.data.total
          this.childrenInfo = res.data.data.records
        } else { //失败
          this.$message.error(res.data.msg)
        }
      })
    },
    showDetail(row) {
      this.child=row
      this.centerDialogVisible = true
    },
    stars(id) {
      this.$axios.get(`collect_child/create_collect?userId=${this.user.id}&childId=${id}`).then(res => {
        if (res.data.code === 20000) { //成功
          this.$message.success(res.data.msg)
        } else { //失败
          this.$message(res.data.msg)
        }
      })
    }
  }
}
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.user-information {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0px 0px 2px #ccc;
  border-radius: 5px;
  font-family: Arial, sans-serif;
}

.user-information h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.user-info-row {
  margin-bottom: 10px;
}

.user-info-row label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
}

.user-info-row span {
  display: inline-block;
  width: calc(100% - 100px);
}

.el-main {
  width: 100%;
}

@import "~element-ui/packages/theme-chalk/src/index";

/* 调整卡片的样式 */
.el-card__body {
  padding: 0;
}

/* 调整标题和内容的样式 */
.el-card__body h2 {
  margin: 0 0 10px;
}

.el-card__body p {
  margin: 0;
}

.el-container {
  width: 100%;
}
.my-card {
  width: 300px;
}

.card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 14px;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  display: block;
}

.card-description {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}

</style>
